<template>
  <div class="login-container">
    <el-form
      :model="form"
      :rules="rules2"
      status-icon
      ref="form"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="title">系统登录</h3>
      <el-form-item prop="userName">
        <el-input type="text" v-model="form.userName" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input type="password" v-model="form.passWord" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="role">
        <el-radio v-model="form.role" label="3">学生</el-radio>
        <el-radio v-model="form.role" label="2">教师</el-radio>
        <el-radio v-model="form.role" label="1">管理员</el-radio>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { request } from "../request.js";

export default {
  data() {
    return {
      logining: false,
      form: {
        userName: "",
        passWord: "",
        role: null
      },
      rules2: {
        userName: [
          {
            required: true,
            message: "请输入您的用户名",
            trigger: "blur"
          }
        ],
        passWord: [
          { required: true, message: "请输入您的密码", trigger: "blur" }
        ],
        role: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur"
          }
        ]
      },
      checked: false
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.logining = true;

          request.request("/doLogin", "POST", this.form, this).then(data => {
            localStorage.setItem("role", this.form.role);
            localStorage.setItem("user", JSON.stringify(data.data));

            switch (parseInt(this.form.role)) {
              case 1: //管理员
              case 3: //学生
                window.location.href = window.location.origin + "/#/student";
                break;
              case 2: //教师
                window.location.href = window.location.origin + "/#/course";
                break;
            }
          });

          // if (
          //   this.form.username === "admin" &&
          //   this.form.password === "123456"
          // ) {
          //   this.logining = false;
          //   localStorage.setItem("user", this.form.username);
          //   window.location.href = window.location.origin;
          // } else {
          //   this.logining = false;
          //   this.$alert("用户名或密码错误", "提示信息", {
          //     confirmButtonText: "确定"
          //   });
          // }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>